<template>
  <div id="userCommentComponent">
    <popup v-model="curStatus" @on-hide="hideMask">
      <slot name='content'>
        <div class="comment-container">
          <div class="comment-header">
            评价
            <img src="static/image/public/closeIcon.png" class="comment-close" @click="hideMask">
          </div>
          <div class="comment-content">
            <!-- 满意度图标选择 -->
            <div class="comment-icon-choose">
              <div :class="['comment-icon-item', iconNumber == index ? 'comment-icon-active' : '']" 
                  v-for='(item,index) in iconList' :key='index'
                  @click="changeIcon(index)">
                <img v-if='iconNumber == index' :src="'static/image/orderInfo/'+item.iconName+'-yes.png'" :alt="item.iconTxt" class="comment-icon-img">
                <img v-else :src="'static/image/orderInfo/'+item.iconName+'-no.png'" :alt="item.iconTxt" class="comment-icon-img">
                <p class="comment-icon-text">{{item.iconTxt}}</p>
              </div>              
            </div>
            
            <!-- 不满意追问内容 -->
            <template v-if='iconNumber==2  && askAgainNum != 0'>
              <p class="comment-ask-title">如对以上解答有疑问，您还有<span class="comment-ask-warn">{{askAgainNum}}</span>次免费追问的机会</p>
              <textarea class="comment-ask-text" placeholder="请填写您想追问的问题" v-model="sadText"></textarea>
            </template>
            
            <!-- 追问次数已没有 -->
            <template v-else-if='iconNumber == 2 && askAgainNum == 0'>
              <p class="comment-bad-title">您的追问次数已使用完</p>
              <div class="comment-tab-choose">
                <div :class='["comment-tab-item",badOptionsNum == index && badOptionsActive[index]  ? "comment-tab-active" : ""]' 
                    @click="changeBadComment(index)"
                    v-for='(item,index) in badOptions' :key='"a"+index'>{{item}}</div>
              </div>            

              <div class="comment-textarea">
                <textarea class="comnent-text" placeholder="我要评价" v-model="badText"></textarea>
              </div>
            </template> 

            <!-- 满意的内容 -->
            <template v-else-if="iconNumber == 0">
              <div class="comment-tab-choose">
                <div :class='["comment-tab-item",tabChooseNum == index && tabActive[index]  ? "comment-tab-active" : ""]' 
                    @click="changeComment(index)"
                    v-for='(item,index) in tabList' :key='index'>{{item}}</div>
              </div>            

              <div class="comment-textarea">
                <textarea class="comnent-text" placeholder="我要评价" v-model="happyText"></textarea>
              </div>
            </template>

            <!-- 一般的内容 -->
            <template v-else>
              <div class="comment-tab-choose">
                <div :class='["comment-tab-item",ordinaryNum == index && ordinaryActive[index]  ? "comment-tab-active" : ""]' 
                    @click="changeOrdinaryComment(index)"
                    v-for='(item,index) in ordinaryOptions' :key='index'>{{item}}</div>
              </div>            

              <div class="comment-textarea">
                <textarea class="comnent-text" placeholder="我要评价" v-model="ordinaryText"></textarea>
              </div>
            </template>               

            <div class="comment-submit" @click="submitComment">提交</div>
          </div>
        </div>
      </slot>     
    </popup>
  </div>
</template>

<script>
import { Popup } from 'vux'
import { setTimeout } from 'timers';
import toolFun from '@/assets/js/tool.js'

  export default {
    props:{
      //是否显示
      showStatus:{
        type:Boolean,
        default:false
      },

      value:{
        type: Number,
      },
      orderCode:{
        type: String,
        default: ''
      },
      mid: {
        type: Number,
        default: undefined
      }
    },
    components:{
      Popup
    },
    data:function(){
      return {
        iconList:[{
          iconName:'happyIcon',
          iconTxt:"满意"
        },{
          iconName:'usualIcon',
          iconTxt:"一般"
        },{
          iconName:'sadIcon',
          iconTxt:"不满意"
        }],
        iconNumber:0,//默认选择满意
        tabActive:[false,false,false,false],//一般或者满意选择项哪个被选择
        tabList:[],
        tabChooseNum:-1, //默认不选择任何选项。
        happyText:'',//满意或者一般的评论内容

        ordinaryActive: [false,false,false,false], // 一般或者满意选择项哪个被选择
        ordinaryOptions: [],// 一般评论的选择项
        ordinaryNum: -1, //默认不选择任何选项
        ordinaryText: '', // 一般的评论内容

        badOptionsActive:[false,false,false,false],//追问两次之后选择项那个被选择
        badOptions:[],//追问两次之后的选择项
        badOptionsNum: -1,//追问两次之后选择项，选择了哪一个
        badText:'',//两次追问之后的评价
        sadText:"",//不满意的评论内容
        askAgainNum:this.value,//免费追问的机会
        curStatus:this.showStatus,
        ordercode:this.orderCode,//当前评价的订单号
        masterId: this.mid // 当前的大师id
      }
    },
    created(){
      this.getOptions()
      console.log('评价组件初始化',this.ordercode,this.masterId)
    },
    watch:{
      showStatus:function(val){
        this.curStatus = val;
      },
      curStatus:function(val){
        this.$emit('changeStatus',val)
      },
      value: function(val){
        this.askAgainNum = val
      },
      orderCode:function(val){
        if(val) {
          this.ordercode = val
          console.log(this.ordercode)
        }
      },
      mid(val){
        if(val) {
          this.masterId = val
          console.log('大师id',this.masterId)
        }
      }
    },
    methods:{
      // 获取配置的评论的选择项
      getOptions() {
        this.$fetch.post('/app/jmyc/comment_config').then(res => {
          if(res.code == 200){
            console.log(res.data)
            this.badOptions = res.data.no ? toolFun.objToArr(res.data.no) : ['没有解答我的疑问','算得不准','解答了我的疑问','算得准']
            this.ordinaryOptions = res.data.ordinary ? toolFun.objToArr(res.data.ordinary) : ['耐心解答','算的很准','专业','服务超值']
            this.tabList = res.data.satisfied ? toolFun.objToArr(res.data.satisfied) : ['耐心解答','算的很准','专业','服务超值']
          }else{
            this.$vux.toast.text(res.msg, 'top')
          }
        })
      },
      hideMask:function(){
        this.curStatus = false;
      },
      //改变满意度
      changeIcon:function(num){
        this.iconNumber = num;
      },
      //满意评论列表选择项
      changeComment:function(num){
        var oldStatus = this.tabActive[num];
        
        var copyArr = [false,false,false,false];
        copyArr[num] = !oldStatus;
        this.tabActive = copyArr;

        this.tabChooseNum = !oldStatus ? num : -1;
        console.log(this.tabChooseNum)
      },
      // 一般评论选择项
      changeOrdinaryComment(num) {
        let oldStatus = this.ordinaryActive[num]
        var copyArr = [false,false,false,false];
        copyArr[num] = !oldStatus;
        this.ordinaryActive = copyArr
        this.ordinaryNum = !oldStatus ? num : -1
        console.log(this.ordinaryNum)
      },
      //追问的选择项切换
      changeBadComment:function(num){
        var oldStatus = this.badOptionsActive[num];
        
        var copyArr = [false,false,false,false];
        copyArr[num] = !oldStatus;
        this.badOptionsActive = copyArr;

        this.badOptionsNum = !oldStatus ? num : -1;
        console.log(this.badOptionsNum)
      },
      //提交按钮
      submitComment:function(){
        //toast公共配置
        var totalConfig = {
          type:'text',
          text:'',
          position:'top'
        }

        if( (this.tabChooseNum == -1 && this.iconNumber != 2 ) && ( this.ordinaryNum == -1 && this.iconNumber != 2 ) ){
          //选择满意或者一般时，未选择选项类型。
          totalConfig.text = '您还未选择满意度类型';
        }else if((this.happyText == '' && this.iconNumber != 2 ) && (this.ordinaryText == '' && this.iconNumber != 2) ){
          //选择满意或者一般时，选择了选项类型，但是没有填评价内容。
          totalConfig.text = '您还未做出评价';
        }else if(this.sadText == '' && this.iconNumber == 2 && this.askAgainNum !=0){
          //选择不满意，未填入追问内容。
          totalConfig.text = '您还未提出追问问题';
        }else if(this.badOptionsNum < 0 && this.iconNumber == 2 && this.askAgainNum == 0){
          //选择不满意，追问次数为0。为选择选项类型
          totalConfig.text = '您还未选择追问满意度类型';
        }else if(this.badText == '' && this.iconNumber == 2 && this.askAgainNum == 0){
          //选择不满意，追问次数为0。选择了选项类型，未作出评价
          totalConfig.text = '您还未做出评价';
        }else{
          if(this.askAgainNum>0 && this.iconNumber==2 ){
            this.$emit('input',--this.askAgainNum)
            this.axiosQuestion()
            this.sadText = ''
            this.iconNumber = 0
          }else{
            this.$emit('selectIcon',this.iconNumber)
            this.axiosComment()
          }
          this.hideMask()
        } 
        this.$vux.toast.show(totalConfig);
      },
      // 评论接口
      axiosComment(){
        let content = this.happyText||this.badText || this.ordinaryText
        let tab = this.tabList[this.tabChooseNum]||this.badOptions[this.badOptionsNum] || this.ordinaryOptions[this.ordinaryNum]
        let text = tab +content
        let satisfaction = ++this.iconNumber
        console.log('评价提交参数',text,satisfaction,this.ordercode)
        this.$fetch.post('/v1/Comment/submit',{
          user_type: 1,
          ordercode: this.ordercode,
          satisfaction: satisfaction,
          content : text,
          target_id: 0
        }).then(res=>{
          console.log(res)
          //toast公共配置
          var totalConfig = {
            type:'text',
            text:'',
            position:'top',
            time:1000
          }
          if(res.code == 1){
            totalConfig.text = '提交成功'
          }else{
            totalConfig.text = '提交失败，请稍后重试'
          }
          this.$vux.toast.show(totalConfig);
        })
      },
      //追问接口
      axiosQuestion() {
        let uid = this.$store.state.userID
        // console.log('评论组件追问参数',this.ordercode,this.masterId)
        // let uid = '869115037298615,869115037349111'
        this.$fetch.post('/app/Jmyc/add_ask',{
          uid: uid,
          question: this.sadText,
          ordercode: this.ordercode,
          mid: this.masterId
        }).then(res=>{
          console.log(res)
          //toast公共配置
          var totalConfig = {
            type:'text',
            text:'',
            position:'top',
            time:1000
          }
          if(res.code == 200){
            this.$emit('input',--this.askNum)
            totalConfig.text = '提交成功'
          }else{
            totalConfig.text = '提交失败，请稍后重试'
          }
          this.$vux.toast.show(totalConfig);
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .comment-container{
    background: white;
    overflow: hidden;
    .comment-header{
      height: 90px;
      line-height: 90px;
      text-align: center;
      position: relative;
      color: #333;
      font-size: 36px;
      border-bottom: 1px solid #E6E6E6;/*no*/
      .comment-close{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        right: 30px;
        margin-top: -15px;
      }
    }
    .comment-content{
      padding: 0 86px;
      .comment-bad-title{
        text-align: center;
        padding: 0 0 40px;
        font-size: 30px;
        color: #333;
      }
      .comment-icon-choose{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .comment-icon-item{
          padding: 40px 0;
          text-align: center;
          .comment-icon-img{
            width: 60px;
            height: 64px;
            display: inline-block;
          }
          .comment-icon-text{
            color: #333;
            font-size: 28px;
          }
          &.comment-icon-active{
            .comment-icon-text{
              color:#FEAC32;
            }
          }
        }
      }
      .comment-tab-choose{
        clear: both;
        overflow: hidden;
        padding-bottom: 20px;
        border-bottom: 1px solid #D9D9D9;
        display: flex;
        justify-content: space-between;
        flex-flow: wrap;
        .comment-tab-item{
          width: 250px;
          height: 70px;
          line-height: 70px;
          margin-bottom: 20px;
          text-align: center;
          color: #FDC470;
          border-radius: 10px;
          border:2px solid #FDC470;/*no*/
          font-size:28px;
          &.comment-tab-active{
            background: #FDC470;
            color: white;
          }
        }
      }
      .comment-textarea{
        margin-top: 40px;
        .comnent-text{
          width: 100%;
          height: 150px;
          resize: none;
          padding: 20px;
          color: #333;
          border: 1px solid #E6E6E6;/*no*/
          box-sizing: border-box;
          font-size: 28px;
          word-break: break-all;
          border-radius: 10px;
        }
      }
      .comment-submit{
        margin: 30px 0 40px;
        font-size: 36px;
        color: white;
        height:84px;
        line-height: 84px;
        text-align: center;
        background:linear-gradient(90deg,rgba(253,196,111,1),rgba(254,172,50,1));
        border-radius:10px;
      }
      .comment-ask-title{
        height: 70px;
        line-height: 70px;
        border-top: 1px solid #E6E6E6;
        color: #333;
        font-size: 26px;
        .comment-ask-warn{
          color:#FDC470;
          font-weight: bold;
          padding: 0 5px;
        }
      }
      .comment-ask-text{
        width: 100%;
        height: 336px;
        resize: none;
        padding: 20px;
        color: #333;
        border: 1px solid #E6E6E6;/*no*/
        box-sizing: border-box;
        font-size: 28px;
        word-break: break-all;
        border-radius: 10px;
      }
    }
  }
</style>